import React, { InputHTMLAttributes, ReactElement } from "react";
import { IconProp } from "@fortawesome/fontawesome-svg-core";
import classNames from "classnames";
import { Icon } from "../Icon/Icon";

//  Omit ： 忽略 size 属性
export interface InputProps extends Omit<InputHTMLAttributes<HTMLElement>, 'size'> {
    /**
     * disabled
     */
    disabled?: boolean;
    /**
     * size
     */
    size?: 'df' | 'lg' | 'sm';
    /**
     * icon
     */
    icon?: IconProp;
    /**
     * prepend
     */
    prepend?: string | ReactElement;
    /**
     * append
     */
    append?: string | ReactElement;

    /**
     * the placeholder
     */
    placeholder?: string;

    /**
     * the child content
     */
    children?: Array<ReactElement> | ReactElement;
    /**
     * icon was clicked
     */
    onIconClick?: () => void;
    /**
     * the input ref
     */
    inputRef?: any;
}

/**
 * .wave-input-wrapper .is-disabled .input-size-lg/.input-size-sm
 * .input-group .input-group-append .input-group-prepend .input-inner
 */
export const Input: React.FC<InputProps> = (
        { 
            disabled=false, size, icon, prepend, append, style, placeholder, children, inputRef,
            onIconClick, ...restProps 
        }
    ) => {

    let { value } = restProps

    if (restProps.defaultValue) {
        if (typeof value == "undefined" || value == null) {
            value = restProps.defaultValue
        } else if (value == "") {
            delete restProps.defaultValue
        }
    } 

    const classes = classNames('wave-input-wrapper', {
        'is-disabled': disabled,
        [`wave-input-size-${size}`]: size,
        'wave-input-group': prepend || append,
        'wave-input-group-append': append,
        'wave-input-group-prepend': prepend,
    });
   
    return (    
        <div className={classes} style={style}>
            {prepend && <div className="wave-input-group-prepend">{prepend}</div>}
            {icon && <div className="icon-wrapper" onClick={onIconClick} ><Icon icon={icon} /></div>}
            <input placeholder={placeholder}
                className="wave-input-inner" 
                ref={inputRef}
                disabled={disabled} 
                {...restProps} 
            />
            {children}
            {append &&
                <div className="wave-input-group-append">{append}</div>
            }
        </div>
    )
}